<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf8");
%>
<script type="text/javascript">

$(document).ready(function() {
	var id = $( "#id" ),
	name = $( "#name" ),
	email = $( "#email" ),
	password = $( "#password" ),
	password2 = $( "#password2" ),
	allFields = $( [] ).add( id ).add( name ).add( email ).add( password ),
	tips = $( ".validateTips" );
	
	function updateTips( t ) {
		tips.text( t )
			.addClass( "ui-state-highlight" );
		setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		}, 500 );
	}
	
	function checkRegexp( o, regexp, n ) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {
			return true;
		}
	}

	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( "Length of " + n + " must be between " +
				min + " and " + max + "." );
			return false;
		} else {
			return true;
		}
	}

	function checkPassword( p1 , p2) {
		if ( p1.val() != p2.val() ) {
			updateTips( "Password and Check Password must the same." );
			return false;
		} else {
			return true;
		}
	}
	
	$( "#create-user" )
		.button()
		.click(function() {
			$( "#dialog-form" ).dialog( "open" );
		});
	
	$( "#login" )
	.button()
	.click(function() {
		$( "#login-form" ).dialog( "open" );
	});
	
	$( "#logout" )
	.button()
	.click(function() {
		var url = "Ajax.template?class=goomi.member.memberService&method=logout&constructor=HttpServletRequest&para=out" ;

		$.getJSON(url, 
			function(json){
				location.reload();
		});
	});
	
	$( "#ok" ).dialog({
		autoOpen: false,
		modal: true,
		buttons: {
			Ok: function() {
				$( this ).dialog( "close" );
				window.reload();
			}
		}
	});
	
	$( "#fail" ).dialog({
		autoOpen: false,
		modal: true,
		buttons: {
			Ok: function() {
				$( this ).dialog( "close" );
			}
		}
	});
	
	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 500,
		width: 425,
		modal: true,
		buttons: {
			"Create an account": function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );

				bValid = bValid && checkLength( id, "id", 3, 20 );
				bValid = bValid && checkLength( name, "username", 3, 20 );
				bValid = bValid && checkLength( email, "email", 8, 80 );
				bValid = bValid && checkLength( password, "password", 5, 16 );
				bValid = bValid && checkPassword( password , password2);
				
				//bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
				// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
				bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. youName@gmail.com" );
				bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

				if ( bValid ) {
					
					var url = "Ajax.template?action=edit&oper=add&table=member&id=" + id.val() + '&name=' + name.val() + '&email=' + email.val() + '&password=' + password.val() ;

					$.getJSON(url, 
						function(json){
							if(json.message == "OK"){
								$( '#dialog-form' ).dialog( "close" );
								$( "#ok" ).dialog( "open" );
							}else if(json.message == "FAIL"){
								
								if((json.exception + "").indexOf("PRIMARY") != -1){
									$('#failMessage').html('此ID已被使用，請選擇其它ID.');
								}else{
									$('#failMessage').html('請確認您填的資料沒有特殊符號.');
								}
								$( "#fail" ).dialog( "open" );
								alert(json.exception);
							}
					});
					 
					
				}
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});
	
	
	$( "#login-form" ).dialog({
		autoOpen: false,
		height: 250,
		width: 425,
		modal: true,
		buttons: {
			"Login": function() {
					
				var url = "Ajax.template?class=goomi.member.memberService&method=login&constructor=HttpServletRequest&para=" + $('#loginId').val() + ',' + $('#loginPassword').val() ;

				$.getJSON(url, 
					function(json){
						if(json.message == "OK"){
							location.reload();
						}else if(json.message == "FAIL"){
							$('#failMessage').html('登入失敗,請確認您的帳號密碼.');
							$( "#fail" ).dialog( "open" );
						}
				});
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});
	
	$( "#tabs" ).tabs();
	
	$( "button[name=functionButton]" )
	.button()
	.click(function() {
		//location = $(this).attr("url");
		$('#d1').html("");
		$('#d2').html("");
		$('#d3').html("");
		$('#d4').html("");
		$('#d5').html("");
		$('#d6').html("");
		$('#d7').html("");
		$('#d8').html("");
		
		$('#' + $(this).attr("div")).load($(this).attr("url"));
	});
});
</script>

<style>
	body { font-size: 62.5%; }
	label, input { display:block; }
	input.text { margin-bottom:12px; width:95%; padding: .4em; }
	fieldset { padding:0; border:0; margin-top:25px; }
	h1 { font-size: 1.2em; margin: .6em 0; }
	div#users-contain { width: 350px; margin: 20px 0; }
	div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
	div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
	.ui-dialog .ui-state-error { padding: .3em; }
	.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>

	<form>
	<fieldset>
		<label for="id">Id</label>
		<input type="text" name="id" id="id" class="text ui-widget-content ui-corner-all" />
		<br><label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
		<br><label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<br><label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
		<br><label for="password2">Check Password</label>
		<input type="password" name="password2" id="password2" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>

<div id="login-form" title="Login">
	<form>
	<fieldset>
		<label for="loginId">Id</label>
		<input type="text" name="loginId" id="loginId" class="text ui-widget-content ui-corner-all" />
		<br><label for="loginPassword">Password</label>
		<input type="password" name="loginPassword" id="loginPassword" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>
<div id="ok">
	<p>
		成功加入會員. 請用您的帳號登入.
	</p>
</div>
<div id="fail">
	<p id='failMessage'>
		加入失敗.
	</p>
</div>
<table width="100%" height="100%" border=0>
<tr><td align="right">
<%
if(session.getAttribute("id") == null){
%>
<button id="create-user">加入會員</button>&nbsp;<button id="login">登入</button>
<%
}else if(session.getAttribute("id") != null){
	if("admin".equals(session.getAttribute("type"))){
%>
<a href="setting.jsp">後台</a>
<%} %>
<button id="logout"><%=session.getAttribute("name") %><%=session.getAttribute("type") %> 登出</button>
<%
}
%>
</td></tr>
<tr height="90%"><td align="left">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">寶貝訂製服<br/>Baby Couture</a></li>
		<li><a href="#tabs-2">關於GOOMI<br/>About Goomi</a></li>
		<li><a href="#tabs-3">知識百寶箱<br/>Goomipidia</a></li>
		<li><a href="#tabs-4">最新消息<br/>Good News</a></li>
		<li><a href="#tabs-5">童裝新趨勢<br/>Trends</a></li>
		<li><a href="#tabs-6">GOOMI友達<br/>GoomiFamily</a></li>
		<li><a href="#tabs-7">品牌導覽<br/>Brands</a></li>
		<li><a href="#tabs-8">會員中心</br>Membership</a></li>
		<li><a href="#tabs-9">線上購物</br>Go Shopping</a></li>
	</ul>
	<div id="tabs-1">
		<button id="b11" name="functionButton" url="jsp/BabyCouture/babyCouture1.jsp" div="d1">訂製123</button>&nbsp;<button id="b12" name="functionButton" url="jsp/BabyCouture/babyCouture2.jsp" div="d1">我的試衣間</button>&nbsp;<button id="b12" name="functionButton" url="jsp/BabyCouture/babyCouture3.jsp" div="d1">私房推薦</button>
		<div id="d1"></div>
	</div>
	<div id="tabs-2">
		<button id="b21"  name="functionButton" url="static.jsp?id=1"  div="d2">品牌理念</button>&nbsp;<button id="b21"  name="functionButton" url="static.jsp?id=2"  div="d2">公司簡介</button>&nbsp;<button id="b23"  name="functionButton" url="static.jsp?id=3" div='d2'>連絡我們</button>
		<div id="d2"></div>
	</div>
	<div id="tabs-3">
		<button id="b81"  name="functionButton" url="static.jsp?id=4" div='d3'>尺寸換算表</button>&nbsp;<button id="b82"  name="functionButton" url="jsp/Goomipidia/goomipidia2.jsp" div='d3'>童裝知識庫</button>&nbsp;<button id="b83"  name="functionButton"  url="jsp/Goomipidia/goomipidia3.jsp" div='d3'>知識交流</button>&nbsp;<button id="b83"  name="functionButton"  url="jsp/Goomipidia/goomipidia4.jsp" div='d3'>有問必答</button>
		<div id="d3"></div>
	</div>
	<div id="tabs-4">
		<button id="b81"  name="functionButton" url="jsp/GoodNews/goodNews1.jsp" div='d4'>新知速報</button>&nbsp;<button id="b82"  name="functionButton" url="jsp/GoodNews/goodNews2.jsp" div='d4'>友達動態</button>&nbsp;<button id="b83"  name="functionButton" url="jsp/GoodNews/goodNews3.jsp" div='d4'>GOOMI好消息</button>
	    <div id="d4"></div>
	</div>
	<div id="tabs-5">
		<button id="b51"  name="functionButton" url="jsp/Trends/trends1.jsp" div="d5">童裝最前線</button>&nbsp;<button id="b52"  name="functionButton" url="jsp/Trends/trends2.jsp" div="d5">火燙新鮮貨</button>&nbsp;<button id="b53"  name="functionButton" url="jsp/Trends/trends3.jsp" div="d5">團結集氣購</button>
		<div id="d5"></div>
	</div>
	<div id="tabs-6">
		<button id="b81"  name="functionButton" url="jsp/GoomiFamily/goomiFamily1.jsp"  div="d6">討論區</button>&nbsp;<button id="b82" name="functionButton" url="jsp/GoomiFamily/goomiFamily2.jsp"  div="d6">相片庫</button>&nbsp;<button id="b83"  name="functionButton"  url="jsp/GoomiFamily/goomiFamily3.jsp"  div="d6">行事曆</button>
		<div id="d6"></div>
	</div>
	<div id="tabs-7">
		<button id="b81"  name="functionButton" url="static.jsp?id=6" div='d7'>GOOMI</button>&nbsp;<button id="b82"  name="functionButton"  url="static.jsp?id=7" div='d7'>COLLEGINE</button>&nbsp;<button id="b83"  name="functionButton"  url="static.jsp?id=8" div='d7'>BLABLA</button>&nbsp;<button id="b83"  name="functionButton"  url="static.jsp?id=9" div='d7'>HEKTIK</button>
		<div id="d7"></div>
	</div>
	<div id="tabs-8">
		<button id="b81"  name="functionButton" url="jsp/Membership/membership1.jsp" div="d8">點數查詢</button>&nbsp;<button id="b82"  name="functionButton" url="jsp/Membership/membership2.jsp" div="d8">資料編輯</button>&nbsp;<button id="b83"  name="functionButton" url="jsp/Membership/membership3.jsp" div="d8">訂單追蹤</button>&nbsp;<button id="b83"  name="functionButton" url="static.jsp?id=5" div="d8">客服中心</button>
		<div id="d8"></div>
	</div>
	<div id="tabs-9">
		<button id="b81"  name="functionButton" url="jsp/membership1.jsp"><a target=_blank href="http://www.ruten.com.tw/">露天拍賣</a></button>
	</div>
</div>

</td></tr>
</table>